<template>
<div class="wapbg">
    <!-- <mt-cell title="goto home" is-link to="index?a=1"></mt-cell> -->
    <div class="top" ref="top">
        <div class="top1 search">
            <div @click="loadShow()">{{load.title}} <span class="wechat-arrow-down"></span></div>
            <div class="searimg"><span class="wechat-arrow0-right"></span></div>
            <div @click="unloadShow()">{{unload.title}} <span class="wechat-arrow-down"></span></div>
        </div>
        <div class="top2" @click="switchPlan()">方案{{schamepicked}}</div>
        <div class="clear"></div>
        <div class="number">
            <div class="font-L">货源总量：{{goodNumber}}</div>
            <div class="font-R">在线司机：{{driverNumber}}</div>
        </div>
        <div class="titleHeader">
            <div v-bind:class="{ active: isActive }" @click="switchDefault()">综合</div>
            <div class="timesort" v-bind:class="{active:isTime}" @click="switchTime()">时间
                <p>
                    <span class="wechat-triangleup" v-show="uptime"></span>
                    <span class="wechat-triangledown" v-show="!uptime"></span>
                </p>
            </div>
            <div class="timesort" v-bind:class="{active:isFreight}" @click="switchPrice()">价格
                <p>
                    <span class="wechat-triangleup" v-show="upprice"></span>
                    <span class="wechat-triangledown" v-show="!upprice"></span>
                </p>
            </div>
            <div class="timesort" id="app" v-bind:class="{active:isTags}" @click=tagbtn()>筛选</div>
        </div>
         <mt-popup position="bottom" v-model="popupBottom">
            <div class="picker-toolbar">
              <span class="mint-datetime-action mint-datetime-cancel" @click="cancelCity()">取消</span>
              <span class="mint-datetime-action mint-datetime-confirm" @click="setCity()">确定</span>
            </div>
            <mt-picker :slots="citySlots" @change="onCityChange"  value-key="title" v-show="Address" ref="city1"></mt-picker>
            <mt-picker :slots="uncitySlots" @change="unCityChange"  value-key="title" v-show="!Address" ref="city2"></mt-picker>
        </mt-popup>
        <mt-popup position="left" v-model="popupLeft">
            <div style="width: 250px;">
                <div class="LeftSlip">
                    <label v-for="tag in tagslist">
                        <input type="checkbox" :value="tag.id" v-model="checkedTips" class="input"><span>{{tag.name}}</span>
                    </label>
                    <div class="clear"></div>
                </div>
                <div class="leftSbtn">
                    <div style="background: #f3f4f8" @click="schamesave()">存为方案</div>
                    <div style="background: #eed36c" @click="filterbtn()">确定</div>
                </div>
            </div>
        </mt-popup>
        <mt-popup position="bottom" v-model="popupBottom_plan">
            <div class="schametitle">方案筛选</div>
            <div class="schamebody">
                <div class="line" v-for="(s,index) in schamelist">
                    <label class="line1" @change="Schoose($event)" :data-loadAcode="s.scheme.loadAcode" :data-unloadAcode="s.scheme.unloadAcode" :data-tags="s.scheme.tagIds" :data-loadAcodeText="s.scheme.loadAcodeText" :data-unloadAcodeText="s.scheme.unloadAcodeText">
                        <input type="radio" name="programme_value" :value="index + 1" v-model="schamepicked">
                        <span>方案{{index + 1}}</span>
                    </label>
                    <div class="line2">
                        <p class="programme_blockdaress">{{s.scheme.loadAcodeText ? s.scheme.loadAcodeText : '全国' }} <span class="wechat-arrow0-right"></span> {{s.scheme.unloadAcodeText ? s.scheme.unloadAcodeText : '全国'}}
                        </p>
                        <p class="programme_blocktip">
                            <span class="program_tips" v-for="ptag in s.scheme.tags">{{ptag.name}}</span>
                        </p>
                    </div>
                    <div class="line3" @click="del(s.ssid,index)"><span class="wechat-delete"></span></div>
                </div>
            </div>
            <div class="picker-toolbar cancelbtn" @click="(popupBottom_plan = !popupBottom_plan )">取消</div>
        </mt-popup>
        <mt-popup position="middle" v-model="popupBottom_detail">
            <div class="detailtitle">货源详情</div>
            <div class="detailcontent">
                <div class="detailline">
                    <div class="title">发货地址:</div>{{detail.address1}}（{{detail.loadAddress}}）
                </div>
                <div class="detailline">
                    <div class="title">收货地址:</div>{{detail.address2}}（{{detail.unloadAddress}}）
                </div>
                <div class="detailline">
                    <div class="title">货物运费:</div>{{detail.price}}元/吨
                </div>
                <div class="detailline">
                    <div class="title">发布时间:</div>{{detail.deliveryTime}}
                </div>
                <div class="detailline">
                    <div class="title">备注信息:</div>{{detail.note}}
                </div>
            </div>
            <div class="bottom">
                <div :class="'bottom_btn ' + phoneColor(detail.sid)" @click="phoneCall(detail.mobile,detail.sid)">拨打电话</div>
            </div>
            <div style="text-align: center;" @click="(popupBottom_detail = !popupBottom_detail )" >
                <img src="../assets/close.png"/>
            </div>
        </mt-popup>
    </div>
    <div class="waitfor" v-show="wait">
        <mt-spinner type="fading-circle" color="#b1b0ab" :size="40"></mt-spinner>
    </div>
    <div :style="style" class="listbody" ref="listbody">
        <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :max-distance="150" @top-status-change="handleTopChange" ref="loadmore">
            <div slot="top" class="mint-loadmore-top">
                <span v-show="topStatus === 'pull'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
                <span v-show="topStatus === 'loading'">Loading...</span>
                <span v-show="topStatus === 'drop'">释放更新</span>
            </div>
            <div class="scroll-wrapper">
                <div class="block" v-for="list in lists" :key="key">
                    <div class="blockleft" @click="detailcontent(list.sid,$event)">
                        <div class="address">
                            <span class="wechat-round"></span> {{list.loadAddress}} <span class="wechat-arrow0-right"></span> {{list.unloadAddress}}
                        </div>
                        <div class="tips"><span class="wechat-time"></span>发布时间：{{list.deliveryTime}}</div>
                        <div class="tips left"><span class="wechat-circle-money"></span>货物运费：<span class="fontred">￥{{list.price}}元/吨</span></div>
                    </div>
                    <div class="blockright">
                        <div  class="callmobile"><span :class="'wechat-phone ' + phoneColor(list.sid)" @click="phoneCall(list.mobile,list.sid)"></span></div>
                    </div>
                    <!-- <div class="blockbottom">
                        <div class="tips2 right"></div>
                    </div> -->
                    <div class="blockbottom list-tags-style">
                        <span v-for="t in list.tags">{{t.name}}</span>
                    </div>
                </div>
            </div>
        </mt-loadmore>
    </div>

</div>
</template>
<script>
import { Popup ,Picker,InfiniteScroll,Spinner,TabContainer,Checklist ,Toast} from 'mint-ui';
export default {
    component: {
      Popup,
      Picker,
      InfiniteScroll,
      Spinner,
      TabContainer
    },
    data () {
      return {
        sort: ' ',
        field: ' ',
        filter: '',
        goodNumber: 0,
        driverNumber: 0,
        popupBottom: false,
        popupLeft: false,
        popupBottom_plan: false,
        popupBottom_detail: false,
        uptime: true,
        upprice: true,
        isActive: true,
        isTime: false,      //列表选中的标签
        isFreight: false,
        isTags: false,
        wait: false,        //等待spinner
        key: '',            //列表渲染key值
        tagslist: [],       //标签列表
        checkedTips: [],    //选中的标签
        schamelist: [],     //方案列表
        schamepicked: '',  //方案选中
        allLoaded: false,
        topStatus: '',      //列表到达顶部的状态
        Address: true,      //显示始发地地址组件
        Areas: {},
        citySlots:[{
            flex: 1,
            defaultIndex: 1,
            values: [] ,
            className: 'slot1',
            textAlign: 'center'
        }, {
            values: [],
            className: 'slot2'
        }, {
            flex: 1,
            values: [],
            className: 'slot3',
            textAlign: 'center'
        }] ,
        uncitySlots:[{
            flex: 1,
            defaultIndex: 1,
            values: [] ,
            className: 'slot1',
            textAlign: 'center'
        }, {
            values: [],
            className: 'slot2'
        }, {
            flex: 1,
            values: [],
            className: 'slot3',
            textAlign: 'center'
        }] ,
        load: {title:'全国',adcode:'000000'},
        unload: {title:'全国',adcode:'000000'},
        loaditem: [{},{},{title:'始发地',adcode:''}],  //临时存放地址
        unloaditem: [{},{},{title:'目的地',adcode:''}],
        lists: [],
        page: 1,
        detail: '',
        url: 'http://api.motu56.com',
        called:[],
        style: {
            height: 0
        }
      }
    },
    mounted () {
        this.$nextTick(function() {
            this.style = {
                height: (document.documentElement.clientHeight - this.$refs.top.offsetHeight - 45) + 'px'
            }
        })

        this.filter = this.checkedTips.join(",")
        this.List(1,1,this.sort, this.field, this.load.adcode, this.unload.adcode,this.filter)
        this.totalGood()
        this.totalDriver()
        this.tagList()
        this.schemesList()
        this.aress()
    },
    methods: {
        phoneColor(id) {
            if (this.called.indexOf(id) > -1) {
                return 'phoneActive'
            } else {
                return ''
            }
        },
        List (page, type, sort, field, loadAcode, unloadAcode, tags) {
            let that = this
            loadAcode = loadAcode=='000000' ? 0 : loadAcode
            unloadAcode = unloadAcode=='000000' ? 0 : unloadAcode
            fetch(this.url+'/wechat/getSOGList?page='+page+'&sort='+sort+'&field='+field+'&loadAcode='+loadAcode+'&unloadAcode='+unloadAcode+'&tids='+tags, {credentials: 'include'}).then(function(res){
                if (res.ok) {
                    res.json().then(function(data) {
                       if(type == 1){
                            that.allLoaded = false
                            that.lists = data.result.list
                        }else{
                            if(data.result.list.length <= 0){
                                that.allLoaded = true
                            }
                            that.lists = that.lists.concat(data.result.list)
                        }
                    });
                } else {
                    console.log(res.status);
                }
            }).catch(function(e) {
             console.log("fetch fail");
            });
        },
        totalGood (){
            let that = this
            fetch(this.url+'/wechat/statistics/goods',{credentials: 'include'}).then(function(res){
                if(res.ok){
                    res.json().then(function(data) {
                        that.goodNumber = data.result.count
                    })
                }else{
                     console.log(res.status)
                }
            }).catch(function(){
               console.log("fetch fail");
            })
        },
        totalDriver (){
            let that = this
            fetch(this.url+'/wechat/statistics/drivers',{credentials: 'include'}).then(function(res){
                if(res.ok){
                    res.json().then(function(data) {
                        that.driverNumber = data.result.count
                    })
                }else{
                    console.log(res.status)
                }
            }).catch(function(){
               console.log("fetch fail");
            })
        },
        tagList (){
            let that = this
            fetch(this.url+'/wechat/tags',{credentials: 'include'}).then(function(res){
                if(res.ok){
                    res.json().then(function(data) {
                        that.tagslist = data.result
                    })
                }else{
                    console.log(res.status)
                }
            }).catch(function(){
               console.log("fetch fail");
            })
        },
        schemesList (){
            let that = this
            fetch(this.url+'/wechat/schemes',{credentials: 'include'}).then(function(res){
                if(res.ok){
                    res.json().then(function(data) {
                        that.schamelist = data.result
                    })
                }else{
                    console.log(res.status)
                }
            }).catch(function(){
               console.log("fetch fail");
            })
        },
        switchDefault () {
            this.$refs.listbody.scrollTop = 0;
            this.key = 'default'
            this.isActive = true
            this.isTime = false
            this.isFreight = false
            this.isTags = false
            this.sort = ''
            this.field = ''
            this.filter = this.checkedTips.join(",")
            this.List(1, 1, this.sort, this.field, this.load.adcode, this.unload.adcode,this.filter)
        },
        switchTime () {
            this.$refs.listbody.scrollTop = 0
            this.key = 'time'
            this.isActive = false
            this.isTime = true
            this.isFreight = false
            this.isTags = false
            this.field = 'deliveryTime'
            this.filter = this.checkedTips.join(",")
            if (this.uptime == true) {
                this.uptime = false
                this.sort = 'desc'
            } else {
                this.sort = 'asc'
                this.uptime = true
            }
            this.List(1, 1, this.sort, this.field, this.load.adcode, this.unload.adcode,this.filter)
        },
        switchPrice () {
            this.$refs.listbody.scrollTop = 0
            this.key = 'price'
            this.isActive = false
            this.isTime = false
            this.isFreight = true
            this.isTags = false
            this.field = 'price'
            this.filter = this.checkedTips.join(",")
            if (this.upprice == true) {
                this.sort = 'desc'
                this.upprice = false
            } else {
                this.sort = 'asc'
                this.upprice = true
            }
            this.List(1, 1, this.sort, this.field, this.load.adcode, this.unload.adcode,this.filter)
        },
        tagbtn () {
            this.isActive = false
            this.isTime = false
            this.isFreight = false
            this.isTags = true
            this.key = 'tag'
            this.popupLeft = true
        },
        filterbtn () {
            this.popupLeft = false
            this.sort = ''
            this.field = ''
            this.filter = this.checkedTips.join(",")
            this.List(1, 1, this.sort, this.field, this.load.adcode, this.unload.adcode, this.filter)
        },
        schamesave () {
            let that = this
            let loadAcode = this.load.adcode
            let unloadAcode = this.unload.adcode
            let tags = this.checkedTips
            let tag = '';
            tags.forEach((t)=>{
                tag += '&tags[]='+t;
            });
            fetch(this.url+'/wechat/saveScheme?loadAcode='+loadAcode+'&unloadAcode='+unloadAcode+tag,{credentials: 'include'}).then(function(res){
                if(res.ok){
                    res.json().then(function(data) {
                        that.popupLeft = false
                        Toast(data.result);
                        that.schemesList()
                    })
                }else{
                    console.log(res.status)
                }
            }).catch(function(){
               console.log("fetch fail");
            })
        },
        switchPlan () {
            this.popupBottom_plan = true
        },
        del (id,index) {
            let that = this
            fetch(this.url+'/wechat/delScheme?ssid=' + id,{credentials: 'include'}).then(function(res){
                if(res.ok){
                    res.json().then(function(data) {
                        that.schamelist.splice(index, 1)
                    })
                }else{
                    Toast('加载失败，请重试')
                }
            }).catch(function(){
               console.log("fetch fail");
            })
        },
        Schoose (e) {
            this.popupBottom_plan = false
            this.page = 1
            let loadcity  = e.currentTarget.getAttribute('data-loadAcodeText'),
                unloadcity = e.currentTarget.getAttribute('data-unloadAcodeText'),
                schametags = e.currentTarget.getAttribute('data-tags')
            this.load.adcode = e.currentTarget.getAttribute('data-loadAcode')
            this.unload.adcode = e.currentTarget.getAttribute('data-unloadAcode')
            this.load.title = loadcity.substring(loadcity.lastIndexOf("/")+1)
            this.unload.title = unloadcity.substring(unloadcity.lastIndexOf("/")+1)
            this.checkedTips =schametags.split(",")

            this.setCityValue(this.load.adcode,1)
            this.setCityValue(this.unload.adcode,2)

            this.List(this.page,1,this.sort, this.field, this.load.adcode, this.unload.adcode,this.checkedTips)
        },
        loadTop () {  // 刷新数据的操作
            this.page = 1
            this.List(this.page, 1,this.sort, this.field, this.load.adcode, this.unload.adcode,this.filter)
            this.lists.splice(0, this.lists.length)
            this.$refs.loadmore.onTopLoaded()
        },
        loadBottom () { // 加载更多数据的操作
            this.page = ++this.page
            this.List(this.page,2,this.sort, this.field, this.load.adcode, this.unload.adcode,this.filter)
            this.$refs.loadmore.onBottomLoaded()
        },
        handleTopChange: function (status) {
            this.topStatus = status;
        },
        detailcontent (id,e) {
            this.wait = true
            // e.currentTarget.style.color = '#A3A3A3'
            let that = this
            let ind = e.currentTarget
            fetch(this.url+'/wechat/getSOGDetails?id=' + id,{credentials: 'include'}).then(function(res){
                if(res.ok){
                    res.json().then(function(data){
                        that.popupBottom_detail = true
                        ind.style.color = '#A3A3A3'
                        that.wait = false
                        that.detail = data.result
                    })
                }else{
                    that.wait = false
                    Toast('加载失败，请重试')
                }
            }).catch(function(){})
        },
        phoneCall (mobile, sid) {
            if (this.called.indexOf(sid) == -1) {
                this.called.push(sid)
            }
            window.location.href = "tel:" + mobile
            fetch(this.url+'/wechat/call?sid=' + sid,{credentials: 'include'}).then(function(){}).catch(function(){})
        },
        loadShow() {
            this.popupBottom = true
            this.Address = true
        },
        unloadShow() {
            this.popupBottom = true
            this.Address = false
        },
        setCity () {
            this.popupBottom = false
            this.page = 1
            if(this.Address){
                this.load.title = this.loaditem[2].title
                this.load.adcode = this.loaditem[2].adcode
            }  else{
                this.unload.title = this.unloaditem[2].title
                this.unload.adcode = this.unloaditem[2].adcode
            }

            this.$refs.listbody.scrollTop = 0
            this.List(this.page,1,this.sort, this.field, this.load.adcode, this.unload.adcode,this.checkedTips)
        },
        cancelCity () {
            this.popupBottom = false
            if(this.Address){
                this.setCityValue(this.load.adcode,1)
            }else{
                this.setCityValue(this.unload.adcode,2)
            }
        },
        setCityValue (adcode,type) {
            let a1 = adcode.substring(0, 2) + '0000',
                a2 = adcode.substring(0, 4) + '00' ,
                c1 = this.Areas['adcode_' + a1] ,
                c2 = c1.childs['adcode_' + a2] ,
                c3 = c2.childs['adcode_' + adcode]
            if(type == 1){
                this.$refs.city1.setSlotValue(0, c1)
                this.$refs.city1.setSlotValue(1, c2)
                this.$refs.city1.setSlotValue(2, c3)
            }else{
                this.$refs.city2.setSlotValue(0, c1)
                this.$refs.city2.setSlotValue(1, c2)
                this.$refs.city2.setSlotValue(2, c3)
            }
        },
        onCityChange(picker, values) {
            let c1 = values[0], c2 = values[1], c3 = values[2];

            let v1 = c1 !== undefined ? c1.adcode.substring(0, 2) : '',
                v2 = c2 !== undefined ? c2.adcode.substring(0, 2) : '',
                v3 = c2 !== undefined ? c2.adcode.substring(0, 4) : '',
                v4 = c3 !== undefined ? c3.adcode.substring(0, 4) : '';

            if (v1 != v2) {
                this.citySlots[1].values = []
                for(let i1 in c1.childs) {
                  this.citySlots[1].values.push(c1.childs[i1])
                }
                this.citySlots[2].values = []
                for(let i2 in this.citySlots[1].values) {
                  this.citySlots[2].values.push(this.citySlots[1].values[i2])
                }
            } else if (v3 != v4) {
              this.citySlots[2].values = []
              for(let i3 in c2.childs) {
                this.citySlots[2].values.push(c2.childs[i3])
              }
            } else if (c1 && c2 && c3)  {
                this.loaditem[2].title = c3.title
                this.loaditem[2].adcode = c3.adcode
            }
        },
        unCityChange(picker, values) {
            let c1 = values[0], c2 = values[1], c3 = values[2];

            let v1 = c1 !== undefined ? c1.adcode.substring(0, 2) : '',
                v2 = c2 !== undefined ? c2.adcode.substring(0, 2) : '',
                v3 = c2 !== undefined ? c2.adcode.substring(0, 4) : '',
                v4 = c3 !== undefined ? c3.adcode.substring(0, 4) : '';

            if (v1 != v2) {
                this.uncitySlots[1].values = []
                for(let i1 in c1.childs) {
                  this.uncitySlots[1].values.push(c1.childs[i1])
                }
                this.uncitySlots[2].values = []
                for(let i2 in this.citySlots[1].values) {
                  this.uncitySlots[2].values.push(this.uncitySlots[1].values[i2])
                }
            } else if (v3 != v4) {
              this.uncitySlots[2].values = []
              for(let i3 in c2.childs) {
                this.uncitySlots[2].values.push(c2.childs[i3])
              }
            } else if (c1 && c2 && c3)  {
                this.unloaditem[2].title = c3.title
                this.unloaditem[2].adcode = c3.adcode
            }
        },
        aress () {
            let world1 = {
                "title": "全国",
                "type": "1",
                "adcode": '000000'
            }
            let world2 = {
                "title": "全国",
                "type": "2",
                "adcode": '000000'
            }
            let world3 = {
                "title": "全国",
                "type": "3",
                "adcode": '000000'
            }
            let that = this
            fetch(this.url+'/common/areas',{credentials: 'include'}).then(function(res){
                if(res.ok){
                    res.json().then(function(data){
                        data.result.unshift(world1,world2,world3)
                        let result = data.result
                        let Areas = {};
                        if (result && result.length > 0) {
                            for (let i = 0; i < result.length; i++) {
                                let item = result[i];
                                if (item.type == 1) {
                                    Areas['adcode_' + item.adcode] = {
                                        adcode: item.adcode,
                                        title: item.title,
                                        childs: {}
                                    };
                                } else if (item.type == 2) {
                                    let adcode = item.adcode.substring(0,2) + '0000'
                                    Areas['adcode_' + adcode].childs['adcode_' + item.adcode] = {
                                        adcode: item.adcode,
                                        title: item.title,
                                        childs: {}
                                    };
                                } else if (item.type == 3) {
                                    let adcode0 = item.adcode.substring(0,2) + '0000'
                                    let adcode1 = item.adcode.substring(0,4) + '00'
                                    if (Areas['adcode_' + adcode0].childs['adcode_' + adcode1]) {
                                        Areas['adcode_' + adcode0].childs['adcode_' + adcode1].childs['adcode_' + item.adcode] = {
                                            adcode: item.adcode,
                                            title: item.title
                                        };
                                    }
                                }
                            }
                        }
                        that.Areas = Areas
                        for (let i1 in Areas) {
                          that.citySlots[0].values.push(Areas[i1])
                          that.uncitySlots[0].values.push(Areas[i1])
                        }

                        for (let i2 in that.citySlots[0].values[0].childs) {
                          that.citySlots[1].values.push(that.citySlots[0].values[0].childs[i2])
                        }

                        for (let i2 in that.uncitySlots[0].values[0].childs) {
                          that.uncitySlots[1].values.push(that.uncitySlots[0].values[0].childs[i2])
                        }
                        for(let i3 in that.citySlots[1].values[0].childs) {
                          that.citySlots[2].values.push(that.citySlots[1].values[0].childs[i3])
                        }
                        for(let i3 in that.uncitySlots[1].values[0].childs) {
                          that.uncitySlots[2].values.push(that.uncitySlots[1].values[0].childs[i3])
                        }
                    })
                }
            }).catch(function(){})
        },
    }
}
</script>
<style>
.wapbg{background:#f4f4f4;margin-bottom: 45px;}
.clear{clear: both;}
.top{background: #F3F4F5;}
.top1{
    border-radius: 15px;
    padding:6px  0px;
    margin: 12px 0px 12px 8px;
    background: #fff;
    color: #6D6D7F;
    font-size:13pt;
    width: 72%;
    float: left;

}
.search{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-around;
    text-align: center;
}
.top2{
    width: 20%;
    float: right;
    border: 1px solid #EA571D;
    margin:14px 8px 11px 0px;
    padding: 3px 0px;
    border-radius: 5px;
    text-align: center;
    color: #EA571D;
    font-size: 12pt;
}
.number{display: flex;padding: 0px 15px;font-size: 13pt;justify-content:space-between;margin: 5px 0px 8px 0px;color: #6D6D7F}
.number div{flex:0 0 48%;}
.font-L{text-align: left;}
.font-R{text-align: right;}
.titleHeader{display: flex;background: #fff;padding: 7px 0px;color: #6D6D7F}
.titleHeader div{flex:0 0 25%;text-align: center;}
.timesort img{width: 15px;}
.active{color: #EA571D}

.block{display: flex;flex-wrap: wrap;background: #fff;margin: 12px 15px;align-items: center;padding: 20px 0px 14px 0px;border-radius: 8px;}
.blockleft{flex: 0 0 84%;justify-content:flex-start;padding-left: 10px;color: #2D2D2D;}
.blockright{flex:0 0 15%;text-align: center;}
.blockbottom{padding-left: 10px; flex : 0 0 100%;}
.blockleft div{line-height: 25px;}
.address{word-wrap: 3px;}
.callmobile span{color: #f2d357;font-size: 25pt;}
.tips{font-size: 11pt;color:#A3A3A3;padding-left:4px;}
.tips2{font-size: 10pt;color:#A3A3A3;text-align: right;padding-right: 10px;}
.fontred{font-size: 13pt;color: #EA571D;}
.list-tags-style span{font-size: 10pt;padding: 2px 4px;margin-right: 3px;color: #fff;}
.list-tags-style span:nth-of-type(odd){background: #eed36d;}
.list-tags-style span:nth-of-type(even){background: #92b85b;}
.blockbottom .left{float: left;width: 70%}
.blockbottom .right{float: right;width: 28%;}
/*标签列表*/
.LeftSlip{padding: 15px 10px;}
.LeftSlip label{float: left;margin-right: 0px;margin-top: 15px;font-size: 11pt}
.LeftSlip label span{padding: 4px 8px;background: #d9d7d4;color: #333;}
.LeftSlip input{opacity: 0;}
.input:checked+span{background: #edd26d;color: #fff;}
.leftSbtn{position: fixed;bottom: 0px;display: flex;width: 100%;height: 45px;line-height: 45px;}
.leftSbtn div{flex:0 0 50%;text-align: center;}
/*方案列表*/
.schametitle{height: 45px;line-height: 45px;text-align: center;color: #8f8f8f;font-size: 12pt;border-bottom: 1px solid #eaeaea}
.schamebody{height: auto;overflow-y: scroll;padding: 15px 0px;max-height: 320px;}
.line{display: flex;padding:8px 0px;align-items:center;border-bottom: 1px solid #f4f4f4}
.line p {padding: 3px 0px}
.line1{width: 22%;}
.line2{width: 65%;}
.line3{width: 10%;text-align: center;}
input[name="programme_value"]:checked+span{color: #d95b2c;}
.line input[type=radio]{opacity: 0;}
.program_tips{padding: 2px 4px;margin-right: 5px;color: #fff;font-size: 10pt}
.programme_blocktip span:nth-of-type(odd){background: #eed36d;}
.programme_blocktip span:nth-of-type(even){background: #92b85b;}
.programme_blockdaress{color: #212121;font-size: 12pt;}
.cancelbtn{background: #eed36d;color: #3a312f;text-align: center;margin: 10px;line-height: 40px}

/*详情页面*/
.detailcontent{padding:10px 8px 10px 3px;background: #fff;}
.detailtitle{height: 45px;line-height: 45px;text-align: center;color: #8f8f8f;font-size: 12pt;border-bottom: 1px solid #eaeaea;background: #fff;}
.detailline{display: flex;line-height: 28px;color: #3C3D3D;font-size: 12pt;}
.title{flex: 0 0 30%;text-align: right;padding-right: 10px;color: #A09F9F;}
.bottom{background: #fff;color: #221714;width: 100%;text-align: center;padding: 14px}
.bottom_btn{background: #F1D256;color: #221714;padding: 12px;font-size: 13pt;}

.top .mint-popup.mint-popup-bottom{width: 100%}
.top .mint-popup.mint-popup-left{height: 100%}
.top .mint-popup.mint-popup-middle{width: 90%;background: transparent;}
/*字体样式*/
.wechat-round{font-size: 14pt;color: #f2d357}
.wechat-time{font-size: 9pt;margin-right: 3px;}
.wechat-circle-money{font-size: 9pt;margin-right: 3px;}
.wechat-arrow-down{font-size: 9pt}
.wechat-delete{font-size: 13pt;}
.wechat-triangledown,.wechat-triangleup{font-size: 14pt;}

/*补充样式*/
.phoneActive{color: #e83916 !important;}
.listbody{overflow: scroll;}
.timesort p{float: right;margin-right: 30%;margin-top: 3px}
.searimg{padding-top: 4px;}
.waitfor{position:absolute;top: 50%;left: 50%;z-index: 100;margin-left: -20px;}
.titleHeader{border-bottom:1px solid #f3f4f5}
</style>